<template>
  <div >
    <el-table :data="tableData" :border="true" highlight-current-row @cell-dblclick="celldblclick">
      <el-table-column
        :label="item.title"
        :prop="item.props"
        v-for="(item, index) in tableTitle"
        :key="index"
        :width="item.width"
      ></el-table-column>

      <el-table-column prop="misstionType" :width="130">
        <template slot="header" slot-scope="scope">
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
              下达状态{{scope.rows}}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="y">已下达</el-dropdown-item>
              <el-dropdown-item command="n">未下达</el-dropdown-item>
              <el-dropdown-item command="a" divided>全部</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>

      <el-table-column prop="montype" :width="130">
        <template slot="header" slot-scope="scope">
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
              任务类型{{scope.rows}}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="y">a</el-dropdown-item>
              <el-dropdown-item command="n">b</el-dropdown-item>
              <el-dropdown-item command="a" divided>全部</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>

      <el-table-column prop="Status" :width="130">
        <template slot="header" slot-scope="scope">
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
              监测分类{{scope.rows}}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="y">a</el-dropdown-item>
              <el-dropdown-item command="n">b</el-dropdown-item>
              <el-dropdown-item command="a" divided>全部</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>

      <el-table-column align="right" :width="280">
        <template slot="header" slot-scope="scope">
          <el-input
            v-model="search"
            size="mini"
            @keyup.enter.native="handleInputConfirm"
            placeholder="输入关键字搜索"
          />
          {{scope.rows}}
        </template>
        <template slot-scope="scope" v-if="canEdit">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="pagesizes"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  methods: {
    handleCommand (command) {
      this.$message('click on item ' + command)
    },
    handleInputConfirm () {
      // 搜索框 回车 根据search的内容来filter filterTableData 里的数据
      this.$emit(
        'searchInputConfirm',
        this.search,
        this.currentPage,
        this.pagesize
      )
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.pagesize = val
      this.postChangeData()
    },
    handleCurrentChange (val) {
      console.log(`当前页 ${val} 条`)
      this.currentPage = val
      this.postChangeData()
    },
    handleEdit (index, row) {
      // 弹框出现编辑页面
      console.log(index, row)
    },
    handleDelete (index, row) {
      // console.log(index, row)
      this.tableData.splice(index, 1)
      // axios
    },
    celldblclick (row, column, cell, event) {
      console.log(row, column, cell, event)
      this.$emit('celldblclick', row, column, cell)
    },
    postChangeData () {
      this.$emit('pageUpdate', this.currentPage, this.pagesize)
    }
  },
  computed: {
    total () {
      return this.tableData.length
    }
  },
  updated: function () {
    // 这个emit放在updated 原因是
    // 只有当currentPage pagesize改变的时候就会重新POST请求后端 但是如果当这两个值同时改变渲染的情况 就会调用两次 updated
    // 所以每当这两个Data改变的时候就重新AXIOS请求一次
    // this.$emit('updatedtest',this.currentPage) 放在这里是找打 tableData 改一次 重新渲染一次 updated 一次
  },
  props: {
    canEdit: {
      type: Boolean,
      default: () => true
    },
    pagesizes: {
      type: Array,
      default: () => [10, 20, 30, 40]
    },
    tableTitle: {
      type: Array,
      default: () => [
        { title: '任务编号', props: 'missionNo', width: '300' },
        { title: '任务名称', props: 'missionName', width: '600' },
        { title: '立项人', props: 'projectName' },
        { title: '下达时间', props: 'startDate' },
        { title: '时限要求', props: 'endDate' }
      ]
    },
    tableData: {
      type: Array,
      default: () => [
        {
          missionNo: '2019011508',
          missionName: '2018年水质月报(2018年12月)',
          misstionType: '环境质量',
          montype: '地表水监测',
          projectName: '王五',
          startDate: '2019-04-01',
          endDate: '2019-06-02',
          Status: '已下达'
        },
        {
          missionNo: '2019011500',
          missionName: '任务测试报告',
          misstionType: '环境质量',
          montype: '集中式饮用水',
          projectName: '王八',
          startDate: '2019-04-01',
          endDate: '2019-06-02',
          Status: '未下达'
        },
        {
          missionNo: '2019011511',
          missionName: '任务委托我监测',
          misstionType: '委托监测',
          montype: '双随机',
          projectName: '赵六',
          startDate: '2019-03-01',
          endDate: '2019-04-02',
          Status: '已下达'
        }
      ]
    }
  },
  data () {
    return {
      pagesize: 10,
      currentPage: 1,
      search: ''
    }
  }
}
</script>

<style lang="stylus">
.el-table
  border-radius 10px
</style>
